<!-- 组织架构 -->

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- isRoot 控制 编辑部门 删除部门 显示 隐藏 -->
        <treeTools
          @addDepts="addDepts"
          :treeNode="company"
          :isRoot="true"
        ></treeTools>

        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <!-- 父组件 在这里 接收 儿子许愿的 事件 用来重新获取数据 正好 getDepartments 就是重新获取数据 调用即可 -->
          <tree-tools
            slot-scope="{ data }"
            :treeNode="data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          ></tree-tools>
        </el-tree>
      </el-card>
    </div>

    <!-- 添加部门弹层 -->
    <!-- 父组件监听子组件传来的 addDepts事件 重新调用拉取数据方法 更新数据-->
    <!-- :showDialog.sync="showDialog" 通过 .sync 语法 传递的数据 子组件可以直接修改
      设置 ref 属性 回流
    -->
    <AddDept
      ref="addDept"
      :showDialog.sync="showDialog"
      :treeNode="node"
      @addDepts="getDepartments"
    ></AddDept>
  </div>
</template>

<script>
import treeTools from "./components/tree-tools.vue"; // 组织架构公共内容
import { getDepartments } from "@/api/departments"; // 导入 获取 查询企业的部门列表 接口方法
import { transListToTreeData } from "@/utils"; // 导入递归方法
import AddDept from "./components/add-dept.vue"; // 添加部门弹出层

export default {
  components: {
    treeTools,
    AddDept,
  },
  data() {
    return {
      // company: { name: "江苏传智播客教育科技股份有限公司", manager: "负责人" },
      company: {}, // 头部组织结构 默认为空对象
      departs: [], // 树形组织结构 默认为空数组
      defaultProps: {
        label: "name", // 表示 从这个属性显示内容
      },
      showDialog: false, // 控制添加部门的弹出与显示
      node: null, // 储存当前点击的部门
    };
  },
  // 生命周期钩子函数 在实例创建完成后被立即调用
  created() {
    // 在这里调用 查询企业的部门列表 的方法
    this.getDepartments();
  },
  methods: {
    // 定义一个获取 查询企业的部门列表 的方法
    async getDepartments() {
      const result = await getDepartments(); // saync await 修饰异步代码 变成同步 等这里执行完成之后进行后续代码
      console.log(result);
      // 将 组织头部结构赋值为 获取到的真实数据
      this.company = {
        name: result.companyName,
        manager: result.companyManage,
        id: "", // 处理首部内容的 pid 数据
      };
      // 将 树形组织结构 的内容 也赋值成真实的数据
      this.departs = transListToTreeData(result.depts, "");
    },
    // 控制 添加部门的 显示
    addDepts(node) {
      this.showDialog = true;
      this.node = node; // // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
    },
    // 编辑部门 显示隐藏
    editDepts(node) {
      this.showDialog = true; // 显示弹层
      this.node = node; // 储存当前点击的 部门
      // 数据回流 通过 this.$refs.ref属性名.方法 调用子组件的方法
      this.$refs.addDept.getDepartDetail(node.id);
    },
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
